<template>
  <div class="app-container">
      <div class="ci">
          <div class="item">
            <span class="name required">城市</span>
            <span class="value">
              <el-input clearable v-model="cityInfo.name" maxlength="15" placeholder="城市名称" style="width: 220px;"></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name required">城市编码</span>
            <span class="value">
              <el-input clearable type="number" v-model="cityInfo.code"  placeholder="城市编码" style="width: 220px;"></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name required">省份编码</span>
            <span class="value">
              <el-input clearable type="number" v-model="cityInfo.provinceCode"  placeholder="省份编码" style="width: 220px;"></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name required">经度</span>
            <span class="value">
              <el-input clearable  type="number" v-model="cityInfo.longitude"  placeholder="经度" style="width: 220px;"></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name required">纬度</span>
            <span class="value">
              <el-input clearable  type="number" v-model="cityInfo.latitude"  placeholder="纬度" style="width: 220px;"></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name">分级</span>
            <span class="value">
              <el-input clearable type="number" v-model="cityInfo.lev" min="1" max="3" placeholder="1,2,3（一二三线城市）" style="width: 220px;"></el-input>
            </span>
          </div>
        <div class="item">
            <span class="name required">拼音</span>
            <span class="value">
              <el-input clearable v-model="cityInfo.pinYin" maxlength="25" placeholder="城市对应的拼音" style="width: 220px;"></el-input>
            </span>
          </div>

          
          <div class="item">
            <span class="name"></span>
            <span class="value">
              <el-button type="primary" @click="savePageInfo()" :loading="saveloading">保存</el-button>
            </span>
          </div>
          <!--- end -->
      </div>
  </div>
</template>

<script>
import path from 'path'
import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as sysconfigApi from '@/api/sysconfig'
import guid from '@/utils/guid'

const defaultRole = {
  key: '',
  name: '',
  description: '',
  routes: []
}

export default {
  name:'CityDetails',
  components: {
  },
  data() {
    return {
      saveloading:false,
      cityInfo:{
        id:guid.empty,
        name:'',
        code:'',
        provinceCode:'',
        pinYin:'',
        longitude:'',
        latitude:'',
        lev:''
      },
    }
  },
  computed: {
    
  },
  created() {
    var that=this;
    const id = that.$route.params && that.$route.params.id
    const token=auth.getToken();

    if(id && id!='0'){
      sysconfigApi.getCityInfo({id:id}).then(res=>{
         if(res.data){
             for(var key in res.data){
                 if(res.data.hasOwnProperty(key)){
                     that.cityInfo[key]=res.data[key];
                 }
             }
         }
      });
    }

  },
  methods: {
    
    //保存
    savePageInfo(){
      var that=this;
      var errorMsg=[];
      if(that.cityInfo.name.trim().length==0){
        errorMsg.push('请填写城市名字');
      }
      if(that.cityInfo.code==0){
        errorMsg.push('请填写城市编码');
      }
      if(!that.cityInfo.provinceCode.trim()){
        errorMsg.push('请填写省份编码');
      }
      if(!that.cityInfo.pinYin.trim()){
        errorMsg.push('请填写城市拼音');
      }
      if(!that.cityInfo.longitude || !that.cityInfo.latitude){
        errorMsg.push('请填写经纬度');
      }

      if(errorMsg.length>0){
        var errorHtml='<p class="errorbox-item">'+errorMsg.join('</p><p class="errorbox-item">')+'</p>';
        that.$notify({
          title: '验证未通过',
          dangerouslyUseHTMLString: true,
          position: 'bottom-left',
          message: errorHtml
        });
        return;
      }
      
      that.saveloading=true;
      sysconfigApi.saveCity(that.cityInfo).then(res=>{
        if(res.data){
          that.$message({
            message: '保存成功！',
            type: 'success'
          });
          
          setTimeout(()=>{
            that.saveloading=false;
          },500)
        }else{
          that.saveloading=false;
        }
      }).catch(()=>{
        that.saveloading=false;
      })
    }
  }
}
</script>


